import Image from "next/image"

function AppItem(image,text){
    return (
        <div className="app-block-item flex flex-col justify-center items-center">
            <Image src={image} alt="app" width={100} height={100}/>
            <div className="app-block-item-text text-center text-[16px] font-bold mt-2">{text}</div>
        </div>

    )
}
export default function AppBlock({list=[]}){
    return (
        <div className="app-block-container flex flex-wrap w-[687px]">
            {
                list.map((item,index)=>{
                    return <div key={index} className={index<=list.length-5?"app-item mb-[76px]":"app-item"}>{AppItem(item.image,item.title)}</div>
                })
            }
        </div>
    )
}